<template>
    <div>
        <Aside />
        <!-- cesium -->
        <div id="cesiumContainer"></div>
        <div class="tools">
            <button @click="addModel('Air', 2000)">飞机模型</button>
            <button @click="addModel('Man', 10)">人物模型</button>
            <button @click="addModel('Balloon', 1000)">气球模型</button>
            <button @click="addModel('MilkCar', 50)">牛奶汽车</button>
            <button @click="addModel('Pawns', 200)">棋子模型</button>
        </div>
    </div>
</template>
<script setup name="AddModel">
import { onMounted, onUnmounted } from 'vue'
import * as Cesium from 'cesium'
import Aside from '@/components/aside/Aside.vue'
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0Y2YxYWFiOC1hMjkxLTQ3MmQtOTMzOC02ODQzNGYzZThjYmIiLCJpZCI6MTg0MTQwLCJpYXQiOjE3MDI0NDY4MDR9.Xax9xESQVAXXQgP_6OnWSj0AAvpwFh_FLQAxjdwfaZ0"
let viewer;
onMounted(() => {
    // 地球视图，底图加载
    viewer = new Cesium.Viewer('cesiumContainer', {
        //地形图层
        terrain: Cesium.Terrain.fromWorldTerrain(),
        //信息窗口
        infoBox: false,
        //显示查询按钮
        // geocoder: false,
        //home按钮
        homeButton: false,
        //控制查看器的显示模式
        sceneModePicker: false,
        // 是否显示图层选择
        baseLayerPicker: false,
        //帮助按钮
        navigationHelpButton: false,
        //播放动画
        // animation: false,
        //时间线
        // timeline: false,
        //全屏模式
        fullscreenButton: false,
    });
    // viewer.extend(Cesium.viewerCesiumInspectorMixin);
    // cesium基本设置
    function cesiumDefaultModel(viewer) {
        //隐藏cesium Icon-logo
        viewer.cesiumWidget.creditContainer.style.display = 'none';
        //帧率
        viewer.scene.debugShowFramesPerSecond = true;
        // cesium的默认视角
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2);
        // 抗锯齿
        viewer.scene.fxaa = true;
        viewer.scene.postProcessStages.fxaa.enabled = false;
        // 水雾特效
        viewer.scene.globe.showGroundAtmosphere = true;
        // 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
        viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
        viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;
        viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;
        //设置缩放程度
        viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;
        viewer.scene.screenSpaceCameraController.maximumZoomDistance = 30000000;
        //设置视角缩放类型
        //设置鼠标操作
        viewer.scene.screenSpaceCameraController.zoomEventTypes = [
            Cesium.CameraEventType.RIGHT_DRAG,
            Cesium.CameraEventType.WHEEL,
            Cesium.CameraEventType.PINCH,
        ];
        viewer.scene.screenSpaceCameraController.tiltEventTypes = [
            Cesium.CameraEventType.MIDDLE_DRAG,
            Cesium.CameraEventType.PINCH,
            {
                eventType: Cesium.CameraEventType.LEFT_DRAG,
                modifier: Cesium.KeyboardEventModifier.CTRL,
            },
            {
                eventType: Cesium.CameraEventType.RIGHT_DRAG,
                modifier: Cesium.KeyboardEventModifier.CTRL,
            },
        ];
        //地形夸张 拉伸地形
        // viewer.scene.globe.terrainExaggeration = 1.0;
        //添加OMS 房屋
        // viewer.scene.primitives.add(await Cesium.createOsmBuildingsAsync())
        //添加瓦片坐标信息
        // viewer.imageryLayers.addImageryProvider(new Cesium.TileCoordinatesImageryProvider())
        // 将三维球定位到中国
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
            orientation: {
                heading: Cesium.Math.toRadians(348.4202942851978),
                pitch: Cesium.Math.toRadians(-89.74026687972041),
                roll: Cesium.Math.toRadians(0)
            },
            complete: function callback() {
                // 定位完成之后的回调函数
            }
        });
    }
    cesiumDefaultModel(viewer); //调用方法
})
onUnmounted(() => {
    viewer.destroy();
})

let url, entity;
function addModel(modelName, height) {
    viewer.entities.remove(entity);
    if (modelName == 'Air') {
        url = '../data/glb/Cesium_Air.glb';
    }
    else if (modelName == 'Man') {
        url = '../data/glb/Cesium_Man.glb';
    }
    else if (modelName == 'Balloon') {
        url = '../data/glb/CesiumBalloonKTX2.glb';
    }
    else if (modelName == 'MilkCar') {
        url = '../data/glb/CesiumMilkTruck.glb';
    }
    else if (modelName == 'Pawns') {
        url = '../data/glb/Pawns.glb';
    }
    const hpr = new Cesium.HeadingPitchRoll(135, 0, 0);
    const position = Cesium.Cartesian3.fromDegrees(104.072961, 30.596403, height);
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
    entity = viewer.entities.add({
        name: modelName,
        position: position,
        orientation: orientation,
        model: {
            uri: url,
            minimumPixelSize: 128,
            maximumScale: 20000,
        },
    });
    viewer.trackedEntity = entity;
    // viewer.flyTo(entity);
}

</script>

<style scoped></style>